<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/font-awesome.css">
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .play_box{
      width: 672px;
      height: 378px;
      margin: 50px auto;
      background:url('img/loading.gif') no-repeat center;
      background-size: cover;
      position: relative;
    }
    video{
      vertical-align: bottom;
      display: none;
    }
    .controls{
      width: 100%;
      height: 35px;
      background-color: #ccc;
      overflow: hidden;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .play{
      width: 40px;
      height:35px;
      float: left;
    }
    .play a{
      width: 100%;
      height: 100%;
      display: block;
      color:green;
      text-decoration: none;
      text-align: center;
      line-height: 35px;
    }
    .progress_line{
      height: 30px;
      margin-left: 40px;
      margin-right: 200px;
      background-color: blue;
      margin-top: 2px;
      cursor:pointer;
    }
    .line{
      height: 100%;
      width: 0px;
      background-color: orange;
    }
    .time{
      position: absolute;
      right: 30px;
      top: 2px;
      line-height: 35px;
    }
    .current_time{
      float: left;
    }
    .other{
      float:left;
    }
    .count_time{
      float: left;
    }
    .full_screen{
      position: absolute;
      right: 10px;
      top: 2px;
      line-height: 35px;
    }
    .full_screen a{
      text-decoration: none;
      color:orange;
    }
  </style>
</head>
<body>
  <div class="play_box">
    <video src="fun.mp4"></video>
    <div class="controls">
      <!-- 播放 -->
      <div class="play">
        <a href="#" class="fa fa-play"></a>
      </div>
      <!-- 播放进度条 -->
      <div class="progress_line">
        <div class="line"></div>
      </div>
      <!-- 时间 -->
      <div class="time">
        <!-- 当前时间 -->
        <div class="current_time">
          <span class="hour">00:</span>
          <span class="minite">00:</span>
          <span class="second">00</span>
        </div>
        <span class="other">/</span>
        <!-- 总时长 -->
        <div class="count_time">
          <span class="hour">00:</span>
					<span class="minite">00:</span>
					<span class="second">00</span>
        </div>
      </div>
      <!-- 全屏效果 -->
      <div class="full_screen">
        <a href="#" class="fa fa-expand"></a>
      </div>
    </div>
  </div>
  <script>
    //获取视频控件
    var video = document.querySelector('video');
    //获取播放按钮
    var a_play = document.querySelector('.play a');
    //获取当前时长
    var current_h = document.querySelector(".current_time .hour");
	 	var current_m = document.querySelector(".current_time .minite");
	 	var current_s = document.querySelector(".current_time .second");
    //获取总时长
    var count_h = document.querySelector('.count_time .hour');
    var count_m = document.querySelector('.count_time .minite');
    var count_s = document.querySelector('.count_time .second');
    //获取总进度条
    var progress_line = document.querySelector('.progress_line');
    var line = document.querySelector('.progress_line .line');
    //获取全屏按钮
    var a_full = document.querySelector('.full_screen .fa');
    video.oncanplay = function(){
      video.style.display = 'block';
      a_play.onclick = function(){
        if(video.paused == true){
          video.play();
          this.classList.add('fa-pause');
        }else{
          video.pause();
          this.classList.remove('fa-pause');
        }
      //在视频播放的时候显示 视频当前时间
      video.ontimeupdate = function(){
        // console.log(video.currentTime);
        current_h.innerText = getTime(this,'currentTime').h + ':';
        current_m.innerText = getTime(this,'currentTime').m + ':';
        current_s.innerText = getTime(this,'currentTime').s;
        //获取播放的时候 当前进度条的长度
        //当前进度条的长度 = 总进度条长度/总播放时间*当前播放时长
        line.style.width = progress_line.offsetWidth / this.duration * this.currentTime + 'px';
        if(this.duration == this.currentTime){
          video.load();
          line.style.width = '0px';
          a_play.classList.remove('fa-pause')
        }
      };
      //点击实现跳播效果(跳播的本质就是改变当前播放时间)
      progress_line.onclick = function(e){
          video.currentTime = e.offsetX * video.duration / this.offsetWidth ;
        };
      };
      //点击实现全屏显示
      a_full.onclick = function(){
        video.webkitRequestFullScreen();
      };
      //在视频能够播放的时候显示 视频总时长
      count_h.innerText = getTime(this,'duration').h + ':';
      count_m.innerText = getTime(this,'duration').m + ':';
      count_s.innerText = getTime(this,'duration').s;
    };
    function getTime(video,type){
      var seconds = 0;
      if(type == 'duration'){
        seconds = video.duration;
      }else{
        seconds = video.currentTime;
      }
      //定义一个空的 时间对象
      var o_time = {};
      //获取时间
      var h = parseInt(seconds / 60 / 60);
      var m = parseInt(seconds / 60 % 60);
      var s = parseInt(seconds % 60);

      h = h > 10 ? h : '0'+h;
      m = m > 10 ? m : '0'+m;
      s = s > 10 ? s : '0'+s;

      o_time.h = h;
      o_time.m = m;
      o_time.s = s;
      // console.log(o_time);
      return(o_time);
    };
  </script>
</body>
</html>